<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>proxy</title>
</head>
<body>
    
</body>
<script>
	// Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
	
	var obj = new Proxy({}, {
		// 设置拦截
		get:function(target, propKey,receiver){
			console.log(`getting ${propKey}`)
			return  Reflect.get(target, propKey,receiver)
		},
		set:function(target, propKey,value,receiver){
			console.log(`setting ${propKey}!  ${value}`)
			return  Reflect.get(target, propKey,value,receiver)
		}
	});


	obj.count = 10;
    ++obj.count;



	// ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。
	// var proxy = new Proxy(target, handler);
	// Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
	 
	// var proxy = new Proxy({}, {
	//   get: function(target, propKey) {
	//     return 35;
	//   },
	
	// });

	// console.log(proxy.time) // 
	// console.log(proxy.name) // 
	// console.log(proxy.title) // 


	// 如果handler没有设置任何拦截，那就等同于直接通向原对象。

	// var target = {};
	// var handler = {};
	// var proxy = new Proxy(target, handler);
	// proxy.a = 'b';
	// console.log(target.a) // 




	// this 问题 虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

	const target = {
	  m: function () {
	    console.log(this === proxy);
	  }
	};
	const handler = {};

	const proxy = new Proxy(target, handler);

	target.m() // false
	proxy.m()  // true
</script>
</html>